<template>
  <div>
    <Card>
      <p slot='title'>余额变更</p>
      <div class="record">
        <Row type="flex" justify="start" class="code-row-bg">
          <record-list v-for="(item,index) in recordData" :key="index" :item="item">
          </record-list>
        </Row>
      </div>
      <i-form ref="form-validate" :rules="ruleValidate" :model="formItem" :label-width="80">
        <Form-item label="账户ID">
          <i-input style="width: 300px;" readonly :value.sync="formItem.input"></i-input>
        </Form-item>
        <Form-item prop="radio" label="账户类型">
          <RadioGroup vertical v-model="formItem.radio">
            <Radio label="payment">
              <span>代付金额</span>
            </Radio>
            <Radio label="freeze">
              <span>冻结金额</span>
            </Radio>
            <Radio label="ensure">
              <span>保证金额</span>
            </Radio>
            <Radio label="nopayment">
              <span>代付金额(不扣手续)</span>
            </Radio>
          </RadioGroup>
        </Form-item>
        <Form-item label="变更金额(元)" prop="money">
          <i-input style="width: 300px;" ref="inputnum" v-model="formItem.money" number></i-input>
        </Form-item>
        <Form-item>
          <i-button class="blue-btm " @click="sureBtn('add')">增加金额</i-button>
          <i-button class="red-btm ml-8" @click="sureBtn('reduce')">减少金额</i-button>
          <i-button class="com-btm ml-8" @click="comback()">返回</i-button>
        </Form-item>
      </i-form>
    </Card>
    <Modal v-model="showModal" width='20' :mask-closable="false" title="信息" @on-ok="ok('add')" class-name="vertical-center-modal"
      @on-cancel="cancel">
      <p>确定为商户增加金额<span>({{this.formItem.money}}元)</span>么?</p>
    </Modal>
    <Modal v-model="showModal2" width='20' :mask-closable="false" title="信息" @on-ok="ok('reduce')" class-name="vertical-center-modal"
      @on-cancel="cancel">
      <p>确定为商户减少金额<span>({{this.formItem.money}}元)</span>么?</p>
    </Modal>
    <!-- 确定增加/减少 -->
    <Modal v-model="confirmModal" :mask-closable="false" class-name="vertical-center-modal" width="20">
      <p slot="header">
        <span>提示</span>
      </p>
      <div style="text-align:center">
        <p class="font-14">加款成功</p>
      </div>
      <div slot="footer">
        <Button type="primary" @click="comback">确定</Button>
      </div>
    </Modal>
    <Modal v-model="confirmModal1" :mask-closable="false" class-name="vertical-center-modal" width="20">
      <p slot="header">
        <span>提示</span>
      </p>
      <div style="text-align:center">
        <p class="font-14">减款成功</p>
      </div>
      <div slot="footer">
        <Button type="primary" @click="comback">确定</Button>
      </div>
    </Modal>
  </div>

  </div>
</template>

<script>
  const Money = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('必须项不能为空'));
    }
    // 模拟异步验证效果
    setTimeout(() => {
      if (!Number.isInteger(value)) {
        callback(new Error('只能填写数字'));
      } else {
        callback();
      }
    });
  };
  import RecordList from '@/components/record-list/record-list.vue'
  export default {
    name: 'change_money_page',
    components: {
      RecordList
    },
    data() {
      return {
        inputNumber: '',
        showModal2: false,
        showModal: false,
        confirmModal: false,
        confirmModal1: false,
        recordData: [{
            title: '总金额：',
            num: 199603.92,
            unit: '元',
            color: '#219021'
          },
          {
            title: '代付金额：',
            num: 19343.92,
            unit: '元',
            color: '#219021'
          },
          {
            title: '冻结金额：',
            num: 0,
            unit: '元',
            color: '#FF0000'
          },
          {
            title: '保证金额：',
            num: 0,
            unit: '元',
            color: '#FF0000'
          },

        ],
        formItem: {
          input: '2002021',
          radio: 'nopayment',
          money: ''
        },
        ruleValidate: {
          money: [{
            validator: Money,
            trigger: 'blur'
          }],
        },

      }
    },
    methods: {
      ok(type) {
        console.log(type)
        switch (type) {
          case 'add':
            this.confirmModal = true;
            break;
          case 'reduce':
            this.confirmModal1 = true;
            break;
        }
      },
      cancel() {
        // this.$Message.info('Clicked cancel');
      },
      // 提交表单
      sureBtn(type) {
        this.$refs['form-validate'].validate((valid) => {
          console.log(this.formItem.radio)
          console.log(valid)
          // console.log(this.$refs['form-validate'])
          // this.inputNumber = this.$refs['inputnum'].currentValue
          if (valid) {
            switch (type) {
              case 'add':
                this.showModal = true;
                break;
              case 'reduce':
                this.showModal2 = true;
                break;
            }
          }
        })
      },
      comback() {
        this.confirmModal = false;
        this.confirmModal1 = false;
        this.$router.push({
          name: 'merchant_list_page'
        })
      }
    }
  }
</script>

<style lang="less">
  .vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal {
      top: 0;
    }
  }

  .ivu-radio-wrapper,
  .ivu-form .ivu-form-item-label {
    font-size: 14px;
  }

  .ivu-form .ivu-form-item-label {
    width: 100px !important;
  }
</style>
